<template>
  <div class="liquid-chart" :v-bind="$attrs"></div>
</template>

<script>
import 'echarts-liquidfill'
import * as echarts from 'echarts'
export default {
  name: 'liquid-chart',
  data() {
    return {
      option: null,
      chart: null
    }
  },
  props: {
    rate: {
      type: Number,
      default: 0
    },
    waterPoloColor: {
      type: String,
      default: '#FFFFFF'
    },
    textColor: {
      type: String,
      default: '#FFFFFF'
    },
    backgroundColor: {
      type: String,
      default: '#FFFFFF'
    },
    borderColor: {
      type: String,
      default: '#FFFFFF'
    },
    shadowColor: {
      type: String,
      default: '#FFFFFF'
    },
    radius: {
      type: String,
      default: '100%'
    },
    fontWeight: {
      type: String,
      default: 'normal'
    }
  },
  methods: {
    init() {
      this.option = {
        title: {
          show: true,
          text: `${this.rate}%`,
          textStyle: {
            fontSize: 10,
            fontFamily: 'Microsoft Yahei',
            fontWeight: this.fontWeight,
            color: this.textColor
          },
          left: 'center',
          top: 'center'
        },
        series: [
          {
            type: 'liquidFill',
            // 占据面积
            radius: this.radius,
            // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
            // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
            shape: 'circle',
            phase: 0, // 波的相位弧度 不设置  默认自动
            // 位置
            center: ['50%', '50%'],
            // 根据数据控制 波浪
            data: [this.rate / 100],
            direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
            // 图形样式
            itemStyle: {
              color: this.waterPoloColor, // 水球显示的背景颜色
              opacity: 1, // 波浪的透明度
              shadowBlur: 0 // 波浪的阴影范围
            },
            backgroundStyle: {
              color: this.backgroundColor, // 水球未到的背景颜色
              opacity: 1 // 波浪的透明度
            },
            outline: {
              show: true,
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 1, // 边框的透明度   默认为 1
                borderWidth: 0, // 边框的宽度
                borderColor: this.borderColor, // 边框颜色
                shadowBlur: 0, // 边框的阴影范围 一旦设置了内外都有阴影
                shadowColor: this.shadowColor // 边框的阴影颜色
              }
            },
            label: {
              normal: {
                formatter: ''
              }
            }
          }
        ]
      }
      this.chart = echarts.init(this.$el)
      this.chart.setOption(this.option)
    }
  },
  watch: {
    rate(newVal) {
      // this.option.series[0].data = newVal
      // 更新之前先清空图表 不然会有数字重叠的问题
      // this.chart.clear()
      // this.$nextTick(() => {
      //   this.chart.setOption(this.option, true)
      // })
    }
  }
}
</script>

<style lang="scss">
.liquid-chart {
  width: 100%;
  height: 100%;
}
</style>
